<template>
  <div
    @click="$emit('change')"
    class="but_style"
    :class="[butStyle, weight, isAccount, textColor]"
  >
    <div class="title">
      <i
        :class="icon"
        class="icon"
      ></i>
      <div class="text">
        <slot></slot>
      </div>
    </div>
    <div class="foot">
      <slot name="foot"></slot>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    // 选中 样式
    account: {
      type: Boolean,
      default: false,
    },
    // 名称
    name: {
      type: String,
      required: "",
    },
    // 类型（可扩展）
    type: {
      type: String,
      default: "",
    },
    // element icon
    icon: {
      type: String,
      default: "",
    },
    // 是否标题
    showTitle: {
      type: Boolean,
      default: false,
    },
    // 字体颜色
    colorBlack: {
      type: Boolean,
      default: false,
    },
  },
  computed: {
    textColor() {
      if (this.colorBlack) {
        return "colorBlack";
      } else {
        return "";
      }
    },
    butStyle() {
      if (this.type === "primary") {
        return "primary";
      } else {
        return "";
      }
    },
    weight() {
      if (this.showTitle) {
        return "weight";
      } else {
        return "";
      }
    },
    isAccount() {
      if (this.account) {
        return "account";
      } else {
        return "";
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.but_style {
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-radius: 10px;
  width: 100%;
  padding: 8px 15px;
  cursor: pointer;
  transition: background-color 0.3s ease;
  margin: 0 0 5px;
  white-space: nowrap; /* 防止文本换行 */
  overflow: hidden; /* 隐藏超出容器的部分 */
  text-overflow: ellipsis; /* 用省略号表示被裁剪的文本 */
  .title {
    width: calc(100% - 15px);
    display: flex;
    align-items: center;
    .icon {
      flex: 0 0 20px;
    }
    .text {
      flex: 1 1 auto;
      overflow: hidden;
      text-overflow: ellipsis;
    }
  }
  &:hover {
    background: rgba(5,86,219,0.05)
  }
}
.primary {
  color: #fff;
  background: linear-gradient( -90deg, #0052d9 0%, rgba(71, 116, 189, 0.651) 100%);
  transition: 0.3s;
  &:hover {
    background: linear-gradient( -90deg, #0053d9dc 0%, rgba(71, 116, 189, 0.473) 100%);
  }
}
.weight {
  color: black;
  font-weight: 700;
}
.account {
  background: rgba(5,86,219,0.1) !important;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  color: black;
}
.colorBlack {
  color: black;
}
</style>
